<template>
  <div class="dep_main">
    <!-- <h1>角色管理</h1> -->
    <div class="btn_div">
      <el-button type="success" style="background-color: #42B983;" @click="dialogFormVisible = true">新增角色</el-button>
    </div>

    <!-- 自定义的表格组件 -->
    <Table ref="mytable" :param="table"></Table>


    <!-- 新增角色的弹窗 -->
    <el-dialog title="新增角色" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="所属部门" :label-width="formLabelWidth">
          <!-- 下拉框 -->
          <el-select v-model="form.depId" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.depName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="form.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色标识" :label-width="formLabelWidth">
          <el-input v-model="form.roleTag" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertRole()">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 设置权限的抽屉 -->
    <el-drawer
      title="选择权限"
      :visible.sync="drawer"
      :direction="direction">

      <!-- 按钮 -->
      <el-button type="success" style="background-color: #42B983; margin-bottom: 10px;" @click="updatePower()">修改权限</el-button>

      <!-- 权限树
       check-strictly - 关闭树形结构的强联动
       node-key - 设置当前权限树的 key的属性名称
       -->
      <el-tree
        :data="tree.data"
        :props="tree.defaultProps"
        ref="tree"
        node-key="id"
        default-expand-all
        show-checkbox
        check-strictly>
      </el-tree>

    </el-drawer>

  </div>
</template>

<script>
  import Table from './Table'

  export default{
    components:{
      Table
    },
    data(){
      return {
        rid: "",
        //权限树的相关属性
        tree: {
          //数据部分
          data: [],
          defaultProps: {
            children: 'children',
            label: 'label'
          }
        },
        //抽屉的相关属性
        drawer: false,
        //方向
        direction: 'ltr',
        formLabelWidth: '120px',
        //部门列表
        options: [],
        //表单数据
        form: {
          depId: "",
          roleName: "",
          roleTag: ""
        },
        //弹出框的显示标识
        dialogFormVisible: false,
        //表格组件的属性
        table: {
          title: [
            {name: "编号", col:"id"},
            {name: "所属部门", col:"depName"},
            {name: "角色名称", col:"roleName"},
            {name: "角色标识", col:"roleTag"}
          ],
          url: this.$.url.rolelist,
          page: {
            enable: true, //是否开启表格组件的分页
            pageSize: 5 //每页显示多少条
          },
          btns: [
            {
              btnName: "设置权限",
              click: (rowData) => {
                console.log("角色id：" + rowData.id);
                //设置角色id
                this.rid = rowData.id;

                //发送ajax请求当前的角色拥有的权限id集合
                this.$.ajax({
                  url: this.$.url.rolePowers,
                  data: {
                    rid: rowData.id
                  },
                  success: (data) => {
                    if(data.code == 200){
                      console.log(data.data);
                      //将当前角色有用的权限id 设置给权限树
                      this.$refs.tree.setCheckedKeys(data.data);
                    }
                  }
                });

                //打开侧滑菜单
                this.drawer = true;
              }
            }
          ]
        }
      }
    },
    methods:{
      //修改角色的权限
      updatePower(){
        //角色的id
        //this.rid;
        //权限id的集合
        var pids = this.$refs.tree.getCheckedKeys();
        //ajax
        this.$.ajax({
          type: 'POST',
          url: this.$.url.updatePowers,
          data: {
            rid: this.rid,
            pidsStr: JSON.stringify(pids)
          },
          success: (data) => {
            if(data.code == 200){
              this.$message.success("权限修改成功！");
              this.drawer = false;
            }
          }
        })
      },
      //查询权限树
      queryTree(){
        this.$.ajax({
          type: "GET",
          url: this.$.url.powerTrees,
          success: (data) => {
            if(data.code == 200){
              this.tree.data = data.data;
            }
          }
        });
      },
      //查询部门列表
      queryDeps(){
        this.$.ajax({
          type: "GET",
          url: this.$.url.deplist,
          success: (data) => {
            if(data.code == 200){
              this.options = data.data;
            }
          }
        });
      },
      //新增角色
      insertRole(){
        //1、先发ajax
        this.$.ajax({
          type: "POST",
          url: this.$.url.roleinsert,
          data: this.form,
          success: (data) => {
            if(data.code == 200){
               //新增成功
               //2、关闭弹窗
               this.dialogFormVisible = false;
               //3、刷新表格
               this.$refs.mytable.request();
            } else if(data.code == 407){
               //数据已经存在
               this.$message.error('部门已经存在');
            } else if(data.code == 405){
               //参数校验异常
               var error = data.data;
               //获取当前对象中的所有value
               for(var er in error){
                 var info = error[er]
                 this.$message.error(info);
               }
            }
          }
        });
      }
    },
    mounted(){
      //加载时触发方法
      this.queryDeps();
      //查询一次权限树数据
      this.queryTree();
    }
  }
</script>

<style>
  .dep_main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    width: 100%;
  }

  .table_cls {
    margin-top: 10px;
  }

  .btn_div {
    /* margin-top: 50px; */
    background-color: #E9EEF3;
    text-align: left;
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    padding-left: 50px;
  }
  
  .btn_div > * {
    margin-right: 10px;
  }
</style>
